<template>
  <div id="problem-create">
    <div class="create-problem">
      <el-form label-width="55px" label-position="left">
        <el-col>
          <el-form-item label="标题：" class="pr">
            <el-input placeholder="请输入提问标题" style="width: 600px"></el-input>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 30px">
          <mavon-editor codeStyle="dracula"
                        placeholder="请输入问题描述"
                        v-model="editValue"
                        @change="submit"
                        :subfield="false"
                        :toolbars="toolbarsOptions"
                        style="height: 300px;overflow: auto;"/>
        </el-col>
        <!--<el-col :span="10">-->
          <!--<el-form-item label="QQ：">-->
            <!--<el-input placeholder="请留下你的QQ" size="mini"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
        <!--<el-col :span="10" :offset="4">-->
          <!--<el-form-item label="网址：">-->
            <!--<el-input placeholder="请留下你的网址" size="mini"></el-input>-->
          <!--</el-form-item>-->
        <!--</el-col>-->
      </el-form>
      <div class="btn-group" style="text-align: right">
        <el-button type="primary" @click="submit" size="mini">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Model, Prop, Vue} from 'vue-property-decorator'

  @Component
  export default class create extends Vue {
    name = "create"; // 创建问题
    editValue = '';
    htmlValue = ''; // 渲染后的html语法
    toolbarsOptions: Object = {
      bold: true, // 粗体
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      undo: true, // 上一步
      redo: true, // 下一步
      preview: true, // 预览
      help: true, // 帮助
    };

    submit(value, render) {
      this.htmlValue = render;
    }

    created() {
    };

    mounted() {
    };
  }
</script>

<style lang="scss" scoped>

  #problem-create {
    width: 800px;
  }

  .create-problem {
    padding: 10px;
    box-sizing: border-box;
  }

</style>
